<template>
  <div class="checkbox1">
    <input type="checkbox" :id="title" />
    <svg width="100" height="100">
      <circle
        fill="none"
        :stroke="color"
        stroke-width="4"
        cx="50"
        cy="50"
        r="40"
        stroke-linecap="round"
        transform="rotate(-90 50 50)"
      />
      <polyline
        fill="none"
        :stroke="color"
        stroke-width="4"
        points="27,50 47,68 75,35"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
    <label :for="title" :style="`color:${color}`">{{ title }}</label>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  props: {
    title: {
      type: String,
      default: "点我",
    },
    color: {
      type: String,
      default: "#68e534",
    },
  },
});
</script>

<style lang="scss" scoped>
.checkbox1 {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  svg {
    circle {
      stroke-dasharray: 251;
      stroke-dashoffset: 251;
    }
    @keyframes circleAni {
      from {
        stroke-dashoffset: 251;
      }
      to {
        stroke-dashoffset: 502;
      }
    }
    polyline {
      stroke-dasharray: 72;
      stroke-dashoffset: 72;
    }
    @keyframes polylineAni {
      from {
        stroke-dashoffset: 72;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
  }
  input[type="checkbox"] {
    position: absolute;
    top: -20rem;
    &:checked + svg {
      circle {
        animation: circleAni 1s ease-in-out forwards;
      }
      polyline {
        animation: polylineAni 0.8s ease-in-out forwards;
        animation-delay: 0.75s;
      }
    }
  }
  label {
    font-size: 1em;
    user-select: none;
    cursor: pointer;
  }
}
</style>
